<template>
	<el-select no-match-text="为查找到您需要的数据" no-data-text="暂无数据" collapse-tags v-model="inputVal"
		:placeholder="configure.placeholder"
		:clearable="props.configure.clearable == undefined ? true : props.configure.clearable" :disabled="configure.disabled"
		@change="handleChange" filterable>
		<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"
			:disabled="item.disabled" />
	</el-select>
</template>

<script lang="ts" setup>
import { ref, PropType, watch } from "vue";
import { OptionType, PySelectType } from "./type";

const props = defineProps({
	//input的值
	modelValue: {
		type: [String, Date],
		required: false,
		default: "",
	},
	//选项的值
	configure: {
		type: Object as PropType<PySelectType>,
		default: {
			size: "default",
		},
	},
});
const inputVal = ref(props.modelValue);

const emits = defineEmits(["update:modelValue", "onChange"]);
const selectOptions = ref([] as OptionType[]);

//change事件
const handleChange = () => {
	props.configure.change && props.configure.change(inputVal.value as string);
	emits("onChange", inputVal.value);
	emits("update:modelValue", inputVal.value);
};

const initSelectOptions = async () => {
	if (typeof props.configure.options == "function") {
		selectOptions.value = await props.configure.options();
	} else {
		selectOptions.value = props.configure.options;
	}
};

watch(
	() => props.modelValue,
	val => {
		inputVal.value = val;
	},
	{ deep: true }
);

watch(
	() => props.configure,
	() => {
		initSelectOptions();
	},
	{ deep: true }
);
</script>
